<template>
  <div>
    <el-dialog title="任务详情" :visible.sync="isDetails" top="50px" width="60%" append-to-body :before-close="handleClose">
      <div class="title">任务信息</div>
      <div class="task-name">
        <span class="hint">任务名称：</span>
        <span>{{taskData.taskName}}</span>
      </div>
      <div class="remark">
        <span class="hint">　　备注：</span>
        <span>{{taskData.remark ? taskData.remark : "暂无"}}</span>
      </div>
      <div class="echarts cf">
        <span class="hint">　关系图：</span>
        <div class="echarts-box">
          <jtopo @clickNodeCall="clickNodeCall" v-if="isJtopo" :node-list="taskData.nodeArr" disabled canvas-id="canvasFind"/>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="接口配置详情" :visible.sync="isConfig" top="50px" width="90%" append-to-body>
      <div style="padding: 15px">
        <interface-config v-if="isConfig" disabled :node="node"/>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Jtopo from "../../compoents/Jtopo"
  import InterfaceConfig from "../../taskManage/compoents/InterfaceConfig"

  export default {
    components: {
      Jtopo, InterfaceConfig
    },
    name:'taskItemDetails',
    props:{
      isDetails:{
        type:Boolean,
        default:false,
        required:true
      },
      taskData:{
        type:Object,
        required:true
      }
    },
    data(){
      return{
        isJtopo: false,
        node: null,
        isConfig: false
      }
    },
    created() {
      this.isJtopo = false;
      this.$nextTick(() => {
        this.isJtopo = true;
      });
    },
    methods:{
      handleClose(){
        this.$emit('closeDetail')
      },
      clickNodeCall(node) {
        this.node = node.interfaceNode;
        this.isConfig = false;
        this.$nextTick(() => {
          this.isConfig = true;
        });
      }
    },
  }
</script>
<style lang="less" scoped>
  .cf:after{clear:both;content:'';display:table;}
  .title{font-size:16px;color:#333;padding:10px 20px;font-weight:900;}
  .task-name{padding:0 20px;}
  .remark{padding:10px 20px;}
  .hint{color: #99a9bf;}
  .echarts{padding:0 20px 30px 20px;
    span{float:left;display: block;}
    .echarts-box{
      float:left;
      height: 490px;
      width: 92%;
      border:1px solid #dcdfe6;
      border-radius: 4px;
      background: #eee;
    }
  }
</style>
